//导入所需的react和react-dom
import {Fragment} from 'react'
import ReactDOM from 'react-dom/client'
//引入csss
import  './index.css'
/* 
  1、创建节点
  渲染的虚拟DOM必须要有一个根节点,为了保证JSX必须有一个根节点，但又不让这个根节点编译后产生新的DOM元素，可以使用Fragment,实际上
  就相当于之前在vue中的template模板
  JSX中元素必须要有闭合标签,如果是向img这个的单标签，可以用/>结束
  React元素的属性名使用驼峰命名法，特殊属性class--->className for---->htmlFor
  推荐：使用小括号包裹JSX,从而避免JS中的自动插入分号陷阱
*/
const template=(<Fragment>
        <h1>我的头像</h1>
        <img src='https://img0.baidu.com/it/u=3645224565,1726081860&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'/>
    
        <label htmlFor='name'>姓名:</label>
        <input id='name' placeholder='请输入您的姓名'/>
    </Fragment>)
//渲染虚拟DOM
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(template)